<template>
  <div class="h-wrap-tiptap h-doc-word">
    <div class="menu-wrap" v-if="editor">
      <button
        :class="{ 'is-active': editor.isActive('bold') }"
      >
        加粗
      </button>
      <button @click="logJson">打印文档json</button>
      <button @click="logHTML">打印文档html</button>
      <button @click="logSchema">打印文档schema</button>
      <button @click="setH1">设置h1</button>
      <button @click="insert">插入内容</button>
      <button @click="insertAfter">最后插入内容</button>
    </div>
    <EditorContent :editor="editor" class="h-wrap-tiptap-content" />
  </div>
</template>
<script>
import { Editor, EditorContent } from "@tiptap/vue-2";
import { StarterKit } from "@tiptap/starter-kit";
// 字符串 js格式
import content from './mock/demo.js'
// json格式
// import content from './mock/demo.json'
import Break from './extensions/break.js'
// console.log('content',content)
export default {
  name: "tiptap",
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    this.editor = new Editor({
      extensions: [
        StarterKit.configure({
          heading: {
            levels: [1, 2],
            HTMLAttributes: {
              class: "heading-cade",
            },
          },
        }),
        Break
      ],
      content:content,
      autofocus: true,
      editable: true,
      injectCSS: false,
      onUpdate: ({ editor ,transaction}) => {
        // this.content = editor.getHTML();
        console.log('onUpdate', editor.getHTML());
        console.log('transaction', transaction);
      },
    });
      // 验证插件是否注册
  console.log('编辑器实例:', this.editor);
  console.log('编辑器实例toJSON 方法:', this.editor.toJSON);
  console.log('注册插件:', this.editor.view.state.plugins);
  },
  beforeDestroy() {
    this.editor.destroy();
    this.editor = null;
  },
  methods: {
    logJson() {
      console.log(this.editor.getJSON());
      console.log(this.editor.getJSON);
      // 打印自定义扩展的count
      // console.log(this.editor.storage.customExtension.count)
    },
    logHTML() {
      console.log(this.editor.getHTML());
    },
    logSchema() {
      console.log(this.editor.schema)
    },
    setH1(){
      this.editor.commands.setContent(`<h1 level="1" color="blue"> set vue2 的 tiptap demo</h1>
        <h1 style="text-align: center;color:red;">set vue2 的 tiptap demo</h1>
        <h2>vue2 的 tiptap demo</h2>
        <p>vue2 的 tiptap demo <strong  data-color='blue'>加粗</strong></p> `)
    },
    insert(){
      this.editor.commands.insertContent(`<p>insert content</p>`)
    },
    insertAfter(){
        const endPos = this.editor.state.doc.content.size

      this.editor.commands.insertContentAt(endPos, `<p>insert content after</p>`)
    }
  },
};
</script>
<style scoped lang="scss">
.h-wrap-tiptap {
  border: 1px solid #ccc;
  padding: 16px;
  height: 500px;
}
.h-wrap-tiptap-content {
  height: 100%;
}
.menu-wrap {
  border: 1px solid #ccc;
  display: flex;
  button {
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: #585858;
    margin: 8px;
  }
  .is-active {
    background-color: #42b983;
    color: #fff;
  }
}
.h-wrap-tiptap {
  :deep(.focus-outline) {
    border: 1px solid #ccc;
    &:focus {
      outline: none;
      border: 1px solid #42b983;
    }
  }
  :deep(.tiptap) {
    padding: 16px;
    .heading-cade {
      color: cadetblue;
    }
    p {
      font-size: 16px;
      margin: 16px 0;
    }
    .hussar-word-text-selection{
      background-color: rgb(253, 3, 37);
    }
   
  }
}
</style>
